<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body> 
 
<div class="demoTable">
  角色名称：
  <div class="layui-inline">
    <input class="layui-input" name="" id="r_name" autocomplete="off">
  </div>
  角色状态
  <div class="layui-inline">
    <input class="layui-input" name="" id="s_status" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload">搜索</button>
</div>
 
<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> 


<script type="text/html" id="status">
    {{#  if(d.status == 1){ }}
    启用
    {{#  } else if(d.status == 2){ }}
    未启用
    {{#  } else if(d.status == 3){ }}
    禁用
    {{#  } else if(d.status == 4){ }}
    回收站
    {{#  } }}
</script>

<script type="text/html" id="barDemo">
    {{# if(d.status == 3){ }}
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  } }}
</script>
               
          
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //方法级渲染
  table.render({
    elem: '#LAY_table_user'
    ,url: 'http://127.0.0.1/test/php/public/index.php/index/Lists/getList'
    ,cols: [[
      {checkbox: true, fixed: true}
      ,{field:'r_id', title: 'ID',sort: true, fixed: true}
      ,{field:'r_name', title: '角色名'}
      ,{field:'status', title: '角色状态', toolbar: '#status'}
      ,{field:'text', title: '描述'}
      ,{fixed: 'right',  title: '操作',width:178, align:'center', toolbar: '#barDemo'}

    ]]
    ,id: 'testReload'
    ,page: true
    
    ,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.code, //解析接口状态
      "msg": res.msg, //解析提示文本
      "count": res.data.total, //解析数据长度
      "data": res.data.data //解析数据列表
    };
  }
  });
  
  var $ = layui.$, active = {
    reload: function(){
      //执行重载
      table.reload('testReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
            r_name : $('#r_name').val(),
            r_status : $('#s_status').val()
        }
      }, 'data');
    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

 //监听工具条
 table.on('tool(user)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.msg('ID：'+ data.id + ' 的查看操作');
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.alert('编辑行：<br>'+ JSON.stringify(data))
    }
  });



});
</script>

</body>
</html>